<template>
    <div class="file-main">
        <div class="top">
            <div @click="isChoosed=true" class='option-main'>
                <span class="text" :class="{isActive:isChoosed}">
                    未审核<template v-if="nshnumber>0">({{nshnumber}})</template>
                </span>
                <div class="bottom" v-show="isChoosed"></div>
            </div>
            <div @click="isChoosed=false" class='option-main'>
                <span class="text" :class="{isActive:!isChoosed}">
                    未通过<template v-if="ntgnumber>0">({{ntgnumber}})</template>
                </span>
                <div class="bottom" v-show="!isChoosed"></div>
            </div>
            <div v-if="isChoosed" @click="isDeleteing=!isDeleteing" class="lightningbox" :class="{lightningbox_active:isDeleteing}">
                <div  class="lightning">
                    <img :src="isDeleteing? lightningActive:lightning"/>
                </div>
                <span v-if="isDeleteing" class="word">完成</span>
                <span v-else class="word">清理</span>
            </div>
            <div class="appeal" v-else>
                <div class="question" @click="questionAppeal">
                    ?
                </div>
            </div>
        </div>
        <div class="middle">
            <keep-alive>
                <unchecklist ref="uncheck" v-show="isChoosed" @getNshNumebr="getNshNumebr" :chooseDelete="isDeleteing"></unchecklist>
            </keep-alive>
            <unpasslist :questioning="isquestioning" v-show="!isChoosed" @getNtgNumber="getNtgNumber" @exit="exit" @updateUncheckList="updateUncheckList"></unpasslist>
        </div>
    </div>
</template>

<script>
import lightning from '../../../assets/img/icon/flashlight.svg'
import lightningActive from '../../../assets/img/icon/flashlight_fec906.svg'
import unchecklist from './UnCheckList'
import unpasslist from './UnPassList'
export default {
  components: {
    unchecklist,
    unpasslist
  },
  data () {
    return {
      isDeleteing: false,
      nshnumber: 0,
      ntgnumber: 0,
      isChoosed: true,
      lightning,
      lightningActive,
      isquestioning: false
    }
  },
  methods: {
    getNshNumebr (number) {
      this.nshnumber = number
    },
    getNtgNumber (number) {
      this.ntgnumber = number
    },
    questionAppeal () {
      this.$store.commit('changeCoverState', true)
      this.isquestioning = true
    },
    exit () {
      this.isquestioning = false
      this.$store.commit('changeCoverState', false)
    },
    updateUncheckList () {
      this.$refs.uncheck.getUnCheckedOtherActivities()
    }
  }
}
</script>

<style lang="scss" scope>
    .file-main {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: relative;
        overflow: hidden;
        .top {
            height: px2rem(44);
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .option-main {
                position: relative;
                width: px2rem(88);
                height: px2rem(44);
                background-color: #fff;
                .text {
                    line-height: px2rem(44);
                    font-family: PingFang SC;
                    font-size: px2rem(14);
                    color: #262626;
                    font-weight: 500;
                    display: block;
                    text-align: center;
                }
                .bottom {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%);
                    width: px2rem(30);
                    height: px2rem(4);
                    border-radius: px2rem(2);
                    background: -webkit-linear-gradient(to right,#60C1F6,#A374E4); /* Safari 5.1 - 6.0 */
                    background: -o-linear-gradient(to right,#60C1F6,#A374E4); /* Opera 11.1 - 12.0 */
                    background: -moz-linear-gradient(to right,#60C1F6,#A374E4); /* Firefox 3.6 - 15 */
                    background: linear-gradient(to right,#60C1F6,#A374E4); /* 标准的语法 */
                }
                .isActive {
                    color: #02A4ED;
                }
            }
            .appeal {
                width: px2rem(64);
                height: px2rem(44);
                display: flex;
                justify-content: center;
                align-items: center;
                .question {
                    cursor: pointer;
                    border:px2rem(2) solid rgba(2,164,237,1);
                    width: px2rem(16);
                    height: px2rem(16);
                    border-radius: 50%;
                    font-family: PingFang SC;
                    font-size: px2rem(12);
                    color: rgba(2,164,237,1);
                    line-height: px2rem(16);
                    text-align: center;
                    font-weight: 800;
                }
            }
            .lightningbox {
                width: px2rem(64);
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                // background-color: #000;
                .lightning {
                    display: inline-block;
                    height: px2rem(13);
                    width: px2rem(16);
                    img {
                        height: px2rem(13);
                        width: px2rem(16);
                    }
                }
                .word {
                    display: inline-block;
                    line-height: px2rem(44);
                    font-family: PingFang SC;
                    font-size: px2rem(14);
                    font-weight: 500;
                }
            }
        }
        .lightningbox_active {
            color:rgba(254,201,6,1);
        }
        .middle {
            position: absolute;
            top: px2rem(44);
            bottom: px2rem(0);
            width: 100%;
            background-color: #F2F4F3;
        }
    }
</style>
